<style scoped>
    .p-title {
        font-size: 22px;
        font-weight: bold;
        text-align: left;
        padding: 20px;
        text-indent: 2em;
        margin-top: 50px;
        font-family: "华文行楷";
    }

    .p-title-modal {
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        padding: 20px;
        text-indent: 2em;
    }

    .p-content {
        font-size: 14px;
        text-align: left;
        text-indent: 2em;
        line-height: 30px;
    }

    .p-content-modal {
        font-size: 16px;
        text-align: left;
        padding: 0 20px;
        text-indent: 2em;
    }

    .ivu-modal-footer {
        border-top: none !important;
        height: 0;
    }

    .content {
        width: 950px;
        margin: 20px auto; 
    }

    .news-item-date {
        float: left;
        height: 100px;
        width: 100px;
        background: #bda912;
        margin-top: 25px;
    }

    .news-item {
        width: 950px;
        height: 150px;
        border-bottom: solid 1px #bda912;
        cursor: pointer;
    }

    .news-item:hover {
        background: #e1e1e1;
    }
    .news-index{
        background: url("../../../static/newsXietun.png");
        background-repeat: no-repeat;
        width:400px;height:300px;float: right;
        background-size: contain;
    }
    [v-cloak] {
        display: none;
    }
    
    .top-img{
        background: url("../../../static/newsFuture.jpg");
         height: 400px;
        width:100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>
<template>
    <div v-cloak>
        <div>
            
        <div class="top-img">
        </div>
            <div class="content">
                <div style="width:950px;height:350px;border-bottom: 1px solid #bda912;margin-top:50px;" v-if="list.length>0">
                    <div style="width:500px;float:left;">
                        <div style="font-size:24px;font-weight:bold;">{{list[0].title}}</div>
                        <p style="font-size:20px;text-indent:2em;">
                            {{list[0].content[0].substring(0,100)}}...... 
                        </p>
                        <Button type="ghost" size="large" style="margin-top:25px;margin-left:50px;" @click="goDetail(0)">查看详细 >></Button>
                    </div>
                    <div class="news-index"></div>
                </div>
                <div v-for="(item,index) in list" v-if="index>0" class="news-item" @click="goDetail(index)">
                    <div class="news-item-date">
                        <div style="color:red;font-size:24px;font-weight:bold;margin-top:25px;text-align: center">{{item.date[0]}}</div>
                        <div style="color:#888;font-size:18px;margin-top:10px;margin-left:20px;">{{item.date[1]}}</div>
                    </div>
                    <div style="float:left;margin-top:25px;margin-left:25px;width:820px;">
                        <div style="font-size:20px;font-weight:bold;">{{item.title}}</div>
                        <p class="p-content">
                            {{item.content[0].substring(0,100)}}......
                         </p>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
    export default {
        name: "newsXietun",
        data() { 
            return{
                list:[]
            }
        }, 
        beforeCreate () {
            $.getJSON('../../../../data/news.json',data=>{  
                this.list = data.newsXietunList;  
            })
        },
        methods: {
            goDetail(index){
               window.open(window.location.origin+'/html/xietunDetail.html?'+index,'_blank');
            }
        }
    };
</script>